<div class="content-section introduction">
    <div class="feature-intro">
        <h1>FullCalendar</h1>
        <p>An event calendar based on the <a href="https://fullcalendar.io/">FullCalendar</a> library.</p>
    </div>
    <app-demoActions github="fullcalendar"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <full-calendar [options]="options"></full-calendar>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation"><p>As it is not a component from PrimeNG, refer to the FullCalendar <a target="_blank" href="https://fullcalendar.io/docs/angular">documentation</a> for more information.</p></p-tabPanel>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/fullcalendar" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fullCalendar [events]="events" [options]="options"&gt;&lt;/p-fullCalendar&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;NgModule&#125; from '@angular/core';
import &#123;CommonModule&#125; from '@angular/common';
import &#123;FormsModule&#125; from '@angular/forms';
import &#123;FullCalendarModule&#125; from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import &#123;FullCalendarDemo&#125; from './fullcalendardemo';
import &#123;FullCalendarDemoRoutingModule&#125; from './fullcalendardemo-routing.module';
import &#123;DialogModule&#125; from 'primeng/dialog';
import &#123;InputTextModule&#125; from 'primeng/inputtext';
import &#123;CalendarModule&#125; from 'primeng/calendar';
import &#123;CheckboxModule&#125; from 'primeng/checkbox';
import &#123;ButtonModule&#125; from 'primeng/button';
import &#123;TabViewModule&#125; from 'primeng/tabview';
import &#123;AppCodeModule&#125; from '../../app.code.component';
import &#123;AppDemoActionsModule&#125; from '../../app.demoactions.component';

FullCalendarModule.registerPlugins([
    dayGridPlugin,
    timeGridPlugin,
    interactionPlugin
]);

@NgModule(&#123;
	imports: [
		CommonModule,
        FormsModule,
		FullCalendarDemoRoutingModule,
        FullCalendarModule,
        DialogModule,
        InputTextModule,
        CalendarModule,
        CheckboxModule,
        ButtonModule,
        TabViewModule,
        AppDemoActionsModule,
        AppCodeModule
	],
	declarations: [
		FullCalendarDemo
	]
&#125;)
export class FullCalendarDemoModule &#123;&#125;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component,OnInit&#125; from '@angular/core';
import &#123;EventService&#125; from '../../service/eventservice';

@Component(&#123;
    templateUrl: './fullcalendardemo.html'
&#125;)
export class FullCalendarDemo implements OnInit &#123;

    events: any[];

    options: any;

    header: any;

    constructor(private eventService: EventService) &#123; &#125;

    ngOnInit() &#123;
        this.eventService.getEvents().then(events => &#123;
            this.events = events;
            this.options = &#123;...this.options, ...&#123;events: events&#125;&#125;;
        &#125;);

        this.options = &#123;
                initialDate : '2019-01-01',
                headerToolbar: &#123;
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                &#125;,
                editable: true,
                selectable:true,
                selectMirror: true,
                dayMaxEvents: true
        &#125;;
    &#125;
&#125;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
@Injectable()
export class EventService &#123;

    constructor(private http: Http) &#123;&#125;

    getEvents() &#123;
        return this.http.get('showcase/resources/data/calendarevents.json')
                    .toPromise()
                    .then(res =&gt; &lt;any[]&gt; res.json().data)
                    .then(data =&gt; &#123; return data; &#125;);
    &#125;
&#125;
</app-code>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;full-calendar [options]="options"&gt;&lt;/full-calendar&gt;
</app-code>
        </p-tabPanel>
    </p-tabView>
</div>
